<template>
  <a-modal
    title="查看成品原料清單"
    :width="760"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('cancel') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading" style="padding:15px 25px;">
      <a-form :form="form" v-bind="formLayout">
        <a-row class="form-row" :gutter="48">
          <div v-for="(v, k) in fields" :key="k">
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item :label="v.label">
                <template>
                  <span>{{ v.customRender? v.customRender(model[v.key]) : model[v.key] }}</span>
                </template>
              </a-form-item>
            </a-col>
          </div>
        </a-row>
      </a-form>
      <!--      <div class="table-operator">-->
      <!--        <a-button type="primary" icon="plus" @click="handleAdd">添加原料</a-button>-->
      <!--      </div>-->
      <a-table :columns="columns" :data-source="data" :pagination="false">
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="customTitle"><a-icon type="smile-o"/> Name</span>
        <span slot="tags" slot-scope="tags">
          <a-tag
            v-for="tag in tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
        <span slot="type" slot-scope="type">
          {{ type | typeFilter }}
        </span>
        <span slot="action" slot-scope="text, record ,index">
          <a @click="handleDelete(index)">删除</a>
        </span>
      </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { _getAllGoods } from '@/api/goods'
import { _getAllWarehouse } from '@/api/warehouse'
import { _getRawMaterialByIdMen } from '@/api/Menu'
// 表单字段
const fields = [
  {
    key: 'nameHk',
    label: '成品名称'
  },
  { key: 'quantity', label: '成品数量', required: true, message: '' }
]

const columns = [
  { title: '貨品編號', dataIndex: 'no' },
  { title: '貨品名稱', dataIndex: 'nameHk' },
  { title: '所需数量', dataIndex: 'subQuantity' },
  { title: '货品类型', dataIndex: 'categoryName' }
]

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  components: {
  },
  data () {
    this.formLayout = {}
    return {
      mdlGoods: null,
      form: this.$form.createForm(this),
      fields: fields,
      columns,
      loading: false,
      selectList: {
        goodsList: [],
        warehouseList: []
      },
      data: []
    }
  },
  created () {
    // 防止表单未注册
    fields.forEach((v, i) => this.form.getFieldDecorator(v.key))
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
    this.$watch('visible', val => {
      if (val) {
        _getRawMaterialByIdMen(this.model.idMen).then((ret) => {
            this.data = ret.data
        })
      }
    })
  },
  mounted () {
    _getAllGoods().then((ret) => {
      this.selectList.goodsList = ret.data
    })
    _getAllWarehouse().then((ret) => {
      this.selectList.warehouseList = ret.data
    })
  },
  methods: {
    handleSuccess (ret) {
      this.loading = false
      if (ret.code === 0) {
        this.form.resetFields()
        this.$emit('cancel')
        this.$message.info(ret.msg)
      } else {
        this.$message.error('res.msg')
      }
    },
    handleAdd () {
      this.mdlGoods = null
      this.visibleGoods = true
    },
    handleDelete (index) {
      this.visibleGoods = false
      this.data.splice(index, 1)
    },
    handleCancel () {
      this.visibleGoods = false
      this.$refs.table.refresh() // 刷新表格
      const form = this.$refs.createModal.form
      form.resetFields() // 清理表单数据（可不做）
      this.data = []
    },
    handleOk (data) {
      // 解釋Goods對象並平鋪
      this.data.push(data)
      this.visibleGoods = false
      const form = this.$refs.createModal.form
      form.resetFields() // 清理表单数据（可不做）
    }
  }
}
</script>
